<template>
	<uni-swiper-dot :info="info" :current="current" field="content" :mode="mode">
		<swiper class="swiper-box" @change="change">
			<swiper-item v-for="(item ,index) in info" :key="index">
				<image :src="item.url" mode="aspectFill"></image>
<!-- 				<view class="swiper-item">
					
				</view> -->
			</swiper-item>
		</swiper>
	</uni-swiper-dot>
	<view class="registration">
	<uni-forms :modelValue="formData" :rules="rules" ref="form">
		<view class="registration-content">
			<uni-forms-item name="email">
				<view class="login-username">
					<uni-easyinput v-model="formData.email" placeholder="请输入邮箱" prefixIcon="email" ></uni-easyinput>
				</view>
			</uni-forms-item>
			<uni-forms-item name="userCode">
				<view class="login-code">
					<uni-easyinput v-model="formData.userCode" placeholder="请输入验证码" prefixIcon="chatboxes"  ></uni-easyinput>
					<button  :disabled="disabled" @click="sendCode">{{ codeMsg }}</button>
				</view>
			</uni-forms-item>
			<uni-forms-item name="password">
				<view class="login-username">
					<uni-easyinput v-model="formData.password" placeholder="请输入密码" prefixIcon="locked" type="password"></uni-easyinput>
				</view>
			</uni-forms-item>
			<uni-forms-item name="repassword">
				<view class="login-username">
					<uni-easyinput v-model="formData.repassword" placeholder="请重复密码" prefixIcon="locked-filled" type="password"></uni-easyinput>
				</view>
			</uni-forms-item>

		</view>
	</uni-forms>
		<view class="login-button"><button @click="register">注册</button></view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			formData:{
				email: '',
				userCode: '',
				password:'',
				repassword:'',
			},
			rules:{
				email:{
					rules: [{
							required: true,
							errorMessage: '请输入邮箱',
						},
						{
							format: "email",
							errorMessage: '邮箱格式错误',
						}
					]
				},
				userCode:{
					rules: [{
							required: true,
							errorMessage: '请输入验证码',
						},
						{
							minLength: 6,
							maxLength: 6,
							errorMessage: '验证码长度为6位',
						}
					]
				},
				password: {
					rules: [{
							required: true,
							errorMessage: '请输入新密码',
						},
						{
							minLength: 4,
							maxLength: 20,
							errorMessage: '密码长度在 {minLength} 到 {maxLength} 个字符',
						}
					]
				},
				repassword: {
					rules: [{
							required: true,
							errorMessage: '重复输入密码',
						},
						{
							minLength: 4,
							maxLength: 20,
							errorMessage: '密码长度在 {minLength} 到 {maxLength} 个字符',
						},
						{
						validateFunction: function(rule, value, data, callback) {								console.log('data', data)								if (value != data.password) {									callback('两次输入的密码必须相同')								}								return true							}
						}
					]
				},
				
				
			},
			disabled: false,
			codeMsg: '获取验证码',
			code: '',
			countdown:60,
			timer:null,
			info: [{
					colorClass: 'uni-bg-red',
					content: '注意事项 A',
					url:'/static/register/1.png'
				}, {
					content: '注意事项 B',
					url:'/static/register/2.png'
				}, {
					content: '注意事项 C',
					url:'/static/register/3.png'
				}],
				current: 0,
				mode: 'default',
		};
	},
	methods: {
		change(e) {
				this.current = e.detail.current;
		},
		register(){
			this.$refs.form.validate().then(res=>{
				console.log(res)
			})
			return
			uni.request({
				url:"user/register",
				method:"POST",
				header:{'content-type': 'application/x-www-form-urlencoded'},
				data:{
					'email':this.formData.email,
					'code':this.formData.userCode,
					'password':this.formData.password,
					're_password':this.formData.repassword
				},
				success(res) {
					if(res.data.code == 200){
						uni.showToast({
							title:"注册成功,转到登录页面",
							icon:"none"
						})
						uni.redirectTo({
							url:"/pages/login/index"
						})
					}else{
						uni.showToast({
							title:res.data.msg,
							icon:"none"
						})
					}
					
				}
			})

			
		},
		sendCode() {
			// if()
			uni.request({
				url:"user/sendcode",
				method:"POST",
				header:{'content-type': 'application/x-www-form-urlencoded'},
				data:{
					'email':this.email,
				},
				success(res) {
					if(res.statusCode != 200){
						uni.showToast({
							title:"验证码发送失败，请稍重试！",
							icon:"none"
						})
						return
					}
				}
			})
			uni.showToast({
				title:"验证码发送成功",
				icon:"none"
			})
			this.disabled = true
			this.startCountdown()
			
		},
		startCountdown() {
		      if (this.timer) return;
		      this.timer = setInterval(() => {
		        if (this.countdown > 0) {
		          this.countdown--;
		          this.codeMsg = `${this.countdown}秒后重新获取`;
		        } else {
		          this.resetCountdown();
		        }
		      }, 1000);
		    },
		resetCountdown() {
			clearInterval(this.timer);
			this.timer = null;
			this.countdown = 60;
			this.disabled = false
			this.codeMsg = '获取验证码';
		}

	}
};
</script>

<style lang="less">
	.swiper-box{
		height: 240px;
	}
.registration {
	width: 100%;
	background-position: center;
	background-size: cover;
	background-color: #fff;
	margin: 0px;
	background-size: 100% 100%;
	background-attachment: fixed;
	opacity: 0.8;
	// margin-top: 100rpx;
	.registration-content{
		display: flex;
		flex-direction: column;
		margin: 0 50rpx;
		input{
			padding: 10rpx;
			width:60%;
			height: 70rpx;
		}
		i {
			color: #11c53e;
			padding-right: 20rpx;
			font-size: 50rpx;
		}
		.login-username{
			display: flex;
			align-items: center;
			border-bottom: 1rpx solid gainsboro;
			margin-top: 30rpx;
		}
		.login-code{
			display: flex;
			align-items: center;
			border-bottom: 1rpx solid gainsboro;
			margin-top: 30rpx;
			button{
				width:220rpx;
				height: 85rpx;
				font-size: 30rpx;
				line-height: 85rpx;
				background-color: #409eef;
				color: #fff;
			}
		}
	}
	.login-button{
		margin-top: 130rpx;
		width: 90%;
		margin-left: 5%;
		button{
			background-color: #409eef;
			color: #fff;
		}
	}
}

.registration-botton {
	display: flex;
	margin-top: 50rpx;
	justify-content: space-between;
	.registration-password {
		padding-left: 40rpx;
		color: #fff;
	}
	.registration-zhuce {
		padding-right: 40rpx;

		color: #fff;
	}
}
</style>

